import { CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Modal, Button, Select, Form, Input, DatePicker, message } from 'antd';
import { useState } from 'react';
import timestampToTime from '../../utils/dateTo';
import http from '../../utils/http';

const { Option } = Select;

const Add = ({ isshowAdd, setAdd, getAllData }) => {
  const [isEditlVisible, setEdit] = useState(false);
  const [addData, setData] = useState({});
  const [form] = Form.useForm();
  const onReset = () => {
    form.resetFields();
  };
  const changeData = (e, value, name) => {
    let obj = addData;
    console.log(value)
    if (e.target) {
      obj[name] = e.target.value;
    } else if (value.value || value.value == 0) {
      obj[name] = value.value;
    } else {
      obj[name] = value;
    }
    setData(obj);
    console.log(addData)
  }
  const submitData = () => {
    addData.alCreatetime = timestampToTime(Date.now());
    http({
      url: '/Alarules/addAlaRules',
      method: 'post',
      data: addData
    }).then((res) => {
      if (res.code == 200) {
        setAdd(false);
        getAllData();
        message.success('添加成功')
      } else {
        message.error('服务器异常，请联系管理员！')
      }
    })
  };
  return <div className="Addmain2" style={{ display: !isshowAdd ? 'none' : 'block' }}>
    <Modal visible={isEditlVisible} onOk={() => { setAdd(false); setEdit(false); onReset(); }} onCancel={() => { setEdit(false) }} width={250} cancelText='取消' okText='确定' style={{ top: '40%' }}>
      <div><ExclamationCircleOutlined style={{ color: 'rgb(255,153,0)' }} /><span>您确认关闭此页面吗？</span></div>
    </Modal>
    <div className="titleTop">
      <div></div>
      <p>告警规则新增</p>
      <CloseOutlined className='close' onClick={() => { setEdit(true) }} />
    </div>
    <Form autoComplete="off" form={form}>
      <div className='dataBar'>
        <div className='titleTop'>告警规则信息</div>
        <div className='com'>
          <div className='com1'>
            <Form.Item
              label="告警规则名称"
              name="alName"
              rules={[{ required: true, message: '请输入告警名称' }]}
            >
              <Input style={{ width: '500px' }} placeholder='请输入告警名称' onChange={(e, value) => { changeData(e, value, 'alName') }} value={addData.alName} />
            </Form.Item>
            <Form.Item
              label="通知用户"
              name="adId"
              rules={[{ required: true, message: '请输入项目编号' }]}
            >
              <Select placeholder="请选择" style={{ width: 200 }} onChange={(e, value) => {
                changeData(e, value, 'adId')
              }}>
                <Option value={1}>管理员1</Option>
                <Option value={2}>管理员2</Option>
                <Option value={3}>管理员3</Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="推送方式"
              name="alMode"
              rules={[{ required: true, message: '请输入项目编号' }]}
            >
              <Select placeholder="请选择" style={{ width: 200 }} onChange={(e, value) => {
                changeData(e, value, 'alMode')
              }}>
                <Option value={0}>手机</Option>
                <Option value={1}>APP</Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="告警规则"
              name="alRules"
              rules={[{ required: true, message: '请输入项目类型' }]}
            >
              <Input style={{ width: '525px' }} placeholder='请输入告警名称' onChange={(e, value) => { changeData(e, value, 'alRules') }} value={addData.alRules} />
            </Form.Item>
            <Form.Item
              label="告警类型"
              name="alType"
              rules={[{ required: true, message: '请选择用户类型' }]}
            >
              <Select placeholder="请选择" style={{ width: 200 }} onChange={(e, value) => {
                changeData(e, value, 'alType')
              }}>
                <Option value={0}>灾害告警</Option>
                <Option value={1}>线路故障</Option>
                <Option value={2}>设备故障</Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="告警等级"
              name="alGrade"
              rules={[{ required: true, message: '请选择项目状态' }]}
            >
              <Select placeholder="请选择" style={{ width: 200 }} onChange={(e, value) => {
                changeData(e, value, 'alGrade')
              }}>
                <Option value={3}>特级</Option>
                <Option value={1}>一级</Option>
                <Option value={2}>二级</Option>
              </Select>
            </Form.Item>
          </div>
        </div>
      </div>
      <Form.Item wrapperCol={{ offset: 10, span: 16 }} style={{ marginBottom: 0 }}>
        <Button type="primary" htmlType="submit" onClick={submitData}>
          保存
        </Button>
        <Button onClick={onReset}>
          重置
        </Button>
      </Form.Item>
    </Form>

  </div>
}

export default Add;